<template>
  <div class="flow">
    <div class="formLook">
      <div class="applicant-details">
        <TitleComponent title="面试录用流程查看"  />
        <div class="applicant-container">
          <el-row :gutter="20" style="margin-top: 20px;margin-left: 10px; text-align: center">
            <el-col :span="24">
              <!-- 左侧内容 -->
              <!-- 附件简历 -->
              <AttachmentSection :FirstData="FirstData" />
              <!-- 基本信息 -->
              <BasicInfoSection :FirstData="FirstData" />
              <!-- HR 流程确认 -->
              <HRProcessSection :FirstData="FirstData" />
              <!-- 面试预约 -->
              <InterviewAppointmentSection :FirstData="FirstData" />
              <!-- 面试信息 -->
              <InterviewInfoSection
                :FirstData="FirstData"
                :sys_interview_method="sys_interview_method"
                v-if="
                  route.query.interview == '复面' ||
                  route.query.interview == '面试结束'
                "
              />
              <!-- 面试信息二 -->
              <InterviewInfoSectionTwo
                :FirstData="FirstData"
                v-if="route.query.interview == '面试结束'"
              />
              <!-- Offer 信息 -->
              <OfferInfoSection
                :FirstData="FirstData"
                v-if="route.query.interview == '面试结束'"
              />
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import TitleComponent from "@/components/TitleComponent.vue";
import AttachmentSection from "../ViewComponent/ApplicantDetails.vue";
import BasicInfoSection from "../ViewComponent/BasicInfoSection.vue";
import HRProcessSection from "../ViewComponent/HRProcessSection.vue";
import InterviewAppointmentSection from "../ViewComponent/InterviewAppointmentSection.vue";
import InterviewInfoSection from "../ViewComponent/InterviewInfoSection.vue";
import OfferInfoSection from "../ViewComponent/OfferInfoSection.vue";
// import CurrentProcessSection from '../ViewComponent/CurrentProcessSection.vue';

import { reactive, ref } from "vue";
import { useRoute } from "vue-router";
import { jobApplicationInfo } from "@/api/recruitment/jobApplication/index.js";
import InterviewInfoSectionTwo from "../ViewComponent/InterviewInfoSectionTwo.vue";

const route = useRoute();
const { proxy } = getCurrentInstance();
const {
  sys_contact_information,
  sys_follow_up,
  sys_interview_method,
  sys_interview_type,
} = proxy.useDict(
  "sys_contact_information",
  "sys_follow_up",
  "sys_interview_method",
  "sys_interview_type"
);
// 岗位需求描述信息
const FirstData = reactive({
  /** 姓名 */
  name: "",

  /** 性别 */
  sex: "",

  /** 联系电话 */
  phoneNumber: "",

  /** 邮箱 */
  mail: "",

  /** 身份证号 */
  idNumber: "",

  /** 出生日期 */
  birthTime: "",

  /** 年龄 */
  age: "",

  /** 学历 */
  educationalBackground: "",

  /** 毕业院校 */
  graduateSchool: "",

  /** 专业 */
  profession: "",

  /** 简历附件 */
  resumeFile: "",

  /** 个人照片 */
  personPhoto: "",

  /** 备注 */
  remarks: "",

  /** 应聘岗位id */
  applicationPositonId: "",

  /** 应聘岗位name */
  applicationPositonName: "",

  /** 应聘渠道 */
  applicationSource: "",

  /** 需求部门id */
  requireDeptId: "",

  /** 需求部门name */
  requireDeptName: "",

  /** 部门编号 */
  jobCode: "",

  /** 需求人数 */
  needNum: "",

  /** 期望到岗日期 */
  hopeArrivalTime: "",

  /** 工作经历 */
  workExperiences: "",

  //面试发起
  /** HRId */
  hrId: "",

  /** HR名字 */
  hrName: "",

  /** 联系时间 */
  contactTime: "",

  /** 联系方式 */
  contactInformation: "",

  /** 后续流程 */
  followUp: "",

  /** 沟通记录的内容 */
  content: "",

  /** 面试预约时间 */
  appointmentTime: "",

  /** 面试官id */
  interviewerId: "",

  /** 面试官名字 */
  interviewerName: "",

  /** 面试方式 */
  interviewMethod: "",

  /** 面试类型 */
  interviewType: "",

  /** 面试地址/视频会议地址 */
  address: "",

  //一面信息
  /** 一轮面试时间 */
  firstInterviewerTime: "",

  /** 一轮面试结果 0通过，1不通过*/
  firstInterviewerResult: "",

  /** 是否需要二轮面试 0是，1否 */
  isSecond: "",

  /** 二轮面试官id */
  interviewerIdSecond: "",

  /** 二轮面试官名字 */
  interviewerNameSecond: "",

  /** 二轮面试类型 */
  interviewTypeSecond: "",

  /** 二轮面试方式 */
  interviewMethodSecond: "",

  /** 二轮面试预约时间 */
  appointmentTimeSecond: "",

  /** 二轮面试地址/视频会议地址 */
  addressSecond: "",

  /** 一轮面试内容记录 */
  firstContent: "",

  //二面信息
  /** 二轮面试时间 */
  interviewerTimeSecond: "",

  /** 二轮面试结果 0通过 1不通过 */
  interviewerResultSecond: "",

  /** 二轮面试内容记录 */
  secondContent: "",

  //offer信息
  /** 预计入职日期 */
  joinTime: "",

  /** 期望薪资 */
  expectedSalary: "",

  /** 最终薪资 */
  finalSalary: "",

  /** offer状态 0接受 1拒绝 */
  offerStatus: "",

  /** 拒绝原因 */
  refusalReason: "",

  /** 是否入职 0是 1否*/
  isJoin: "",

  /** 未入职原因 */
  notJoinReason: "",

  /** 录用通知文件 */
  hireFile: "",
});

onMounted(() => {
  if (route.query.id) {
    getJobInfo(route.query.id);
  }
});
const getJobInfo = (id) => {
  jobApplicationInfo(Number(id)).then((res) => {
    if (res.data) {
      Object.keys(res.data).forEach((item) => {
        if (res.data[item]) {
          FirstData[item] = res.data[item];
          FirstData.sex = res.data.sex;

          // 预约面试时间

          if (FirstData.firstInterviewerTime) {
            // 面试结果
            FirstData.firstInterviewerResult = Number(
              FirstData.firstInterviewerResult
            );

            // 是否需要第二轮面试
            FirstData.isSecond = Number(FirstData.isSecond);

            FirstData.isJoin = Number(FirstData.isJoin);
            FirstData.offerStatus = Number(FirstData.offerStatus);

            FirstData.interviewerResultSecond = Number(
              FirstData.interviewerResultSecond
            );
          }

          // 第二轮面试类型
          sys_interview_type.value.forEach((active) => {
            if (active.value == FirstData.interviewTypeSecond) {
              FirstData.interviewTypeSecond = active.label;
            }
          });

          // 第二轮面试方式
          sys_interview_method.value.forEach((active) => {
            // console.log(active.value);
            if (active.value == FirstData.interviewMethodSecond) {
              FirstData.interviewMethodSecond = active.label;
            }
          });
        }
      });
    }
  });
};

function handleClose() {
  const obj = { path: "/recruitment/RecruitmentProcess" };
  proxy.$tab.closeOpenPage(obj);
}
</script>

<style scoped lang="scss">
.applicant-details {
  width: 100%;
  margin: 0 auto;
  background: #fff;
  // overflow: auto;
}

:deep(.el-input__wrapper, .el-select__wrapper.is-disabled) {
  box-shadow: none !important;
  background: white !important;
}
:deep(.el-select__wrapper.is-disabled) {
  box-shadow: none !important;
  background: white !important;
}
:deep(.el-textarea__inner) {
  box-shadow: none !important;
  background: white !important;
}
:deep(.el-select__suffix) {
  display: none;
}

:deep(.el-input.is-disabled .el-input__inner) {
  color: #383d48;
  -webkit-text-fill-color: #383d48;
  // cursor: auto;
}
:deep(.el-textarea__inner) {
  color: #383d48;
  -webkit-text-fill-color: #383d48;
  // cursor: auto;
}
:deep(.el-input.is-disabled) {
  cursor: auto;
}

:deep(.el-select__wrapper.is-disabled .el-select__selected-item) {
  color: #383d48;
  -webkit-text-fill-color: #383d48;
  cursor: auto;
}

// el-form-item el-form-item--default asterisk-left
:deep(.el-form-item__label) {
  color: #6f7b90 !important;
  font-weight: 400;
}

.section-interview {
  width: 80px;
  height: 30px;
  background: #f1f2f4;
  text-align: center;
  line-height: 30px;
  font-size: 13px;
  color: #6f7b90;
}
</style>
